$(function() {
	// onresize时间,随着屏幕宽度改变而改变
	window.onresize = function() {
		let width = this.document.documentElement.clientWidth;
		// console.log(width);
		if (width > 1920) {
			width = 1920;
		} else if (width < 1024) {
			width = 1024;
		}
		let fontSize = width / 80 + 'px';
		this.document.documentElement.style.fontSize = fontSize;
	};
	// 异常监控
	(function() {
		$('.fault').on('click', '.Tab a', function() {
			// 点击对应的a元素,改变他的颜色样式
			$(this).addClass('active').siblings().removeClass('active');
			// 点击对应的a元素,显示它相应的内容
			$('.fault .content').eq($(this).data('index')).show().siblings('.content').hide(); //没成功
			console.log($('.fault .content'));
		});
		// 给ul的子元素多追加一个内容
		$('.fault .list ul').each(function() {
			$(this).append($(this).children().clone());
		});
	})();

	// 饼图
	(function() {
		var myChart = echarts.init(document.querySelector('.census .draw'));

		// 指定图表的配置项和数据
		let option = {
			tooltip: {
				trigger: 'item',
				formatter: '{a} <br/>{b} : {c} ({d}%)'
			},
			series: [
				{
					name: '城市',
					type: 'pie',
					// toolbox: {
					// 	show: true,
					// 	feature: {
					// 		mark: { show: true },
					// 		dataView: { show: true, readOnly: false },
					// 		magicType: {
					// 			show: true,
					// 			type: [ 'pie', 'funnel' ]
					// 		},
					// 		restore: { show: true },
					// 		saveAsImage: { show: true }
					// 	}
					// },
					radius: [ 15, 50 ],
					center: [ '50%', '50%' ],
					roseType: 'area',
					data: [
						{ value: 10, name: '安徽' },
						{ value: 5, name: '阜阳' },
						{ value: 15, name: '滁州' },
						{ value: 25, name: '池州' },
						{ value: 20, name: '淮南' },
						{ value: 35, name: '亳州' },
						{ value: 30, name: '界首' },
						{ value: 40, name: '蒙城' }
					],
					color: [ '#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff' ]
				}
			]
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	})();

	// 柱形图
	(function() {
		// 定义三个item对象
		let item = {
			value: 1200,
			itemStyle: { color: '#254065' },
			// 不能设置单个元素是否有tooltip,所以当需要进行单个 item的处理的时候，我们只能进行其它的操作，如设置透明度等
			tooltip: {
				// 悬浮层透明度为0
				extraCssText: 'opacity:0'
			},
			emphasis: {
				itemStyle: {
					color: '#254065'
				}
			}
		};
		// 1.初始化
		let mychart = echarts.init(document.querySelector('.city-census .bar-chart'));
		// 2.添加配置项
		let option = {
			color: [ '#f00' ],
			tooltip: {
				// axis为轴上触发有效果,item为在元素身上触发
				trigger: 'item',
				axisPointer: {
					// 坐标轴指示器，坐标轴触发有效
					type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			grid: {
				// 之前我们讲过定位，通过定位的四个方向的设置，可以控制元素的大小
				left: '3%',
				right: '4%',
				bottom: '3%',
				top: '5%',
				// 图表的大小范围是否包含标签内容
				containLabel: true,
				// 必须设置为true才能看到边框
				show: true,
				// 设置图表的边框颜色
				borderColor: 'rgba(0, 240, 255, 0.3)'
			},
			xAxis: [
				{
					type: 'category',
					data: [ '安徽', '北京', '广州', '济南', '合肥', '', '......', '', '杭州', '厦门', '深圳', '青岛', '阜阳' ],
					axisTick: {
						alignWithLabel: true
					},
					axisLabel: {
						color: '#4c9bfd'
					}
				}
			],
			yAxis: [
				{
					type: 'value',
					// 设置垂直方向上的轴的样式
					splitLine: {
						lineStyle: {
							color: '#4c9bfd'
						}
					},
					axisLabel: {
						color: '#4c9bfd'
					}
					// axisLine:{
					//     lineStyle:{
					//         color:'#4c9bfd'
					//     }
					// }
				}
			],
			series: [
				{
					name: '城市',
					type: 'bar',
					barWidth: '60%',
					data: [ 2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240 ],
					// itemStyle:{
					//     color:'yellow'
					// }
					// 设置item的颜色
					color: {
						// 说明是线性渐变
						type: 'linear',
						// 所谓的0和1，其实代表是的方向
						x: 0,
						y: 0,
						x2: 0,
						y2: 1,
						// 渐变色的起始和终点
						colorStops: [
							{
								offset: 0,
								color: '#00fffb' // 0% 处的颜色
							},
							{
								offset: 1,
								color: '#0061ce' // 100% 处的颜色
							}
						]
					}
				}
			]
		};
		// 3.渲染
		mychart.setOption(option);
	})();

	// 订单量
	(function() {
		// 定义数据
		var data = {
			day365: { orders: '20,301,987', amount: '99834' },
			day90: { orders: '301,987', amount: '9834' },
			day30: { orders: '1,987', amount: '3834' },
			day1: { orders: '987', amount: '834' }
		};
		// 才开始索引为0
		let index = 0;
		$('.data').on('click', '.time a', function() {
			index = $(this).index();
			$(this).addClass('active').siblings().removeClass('active');
			let type = $(this).data('index');
			let currentData = data[type];
			$('.data_orders').html(currentData.orders);
			$('.data_count').html(currentData.amount);
		});
		// 获取所有a标签
		let all = $('.data .time a');
		let timeId = setInterval(() => {
			index++;
			if (index >= 4) {
				index = 0;
			}
			// 触发当前元素所绑定的click事件有两种方式
			// $(all[index]).trigger('click');
			$(all[index]).click();
		}, 1000);
	})();

	// 折线图
	(function() {
		var data = {
			year: [
				[ 24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120 ],
				[ 40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79 ]
			],
			quarter: [
				[ 23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38 ],
				[ 43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34 ]
			],
			month: [
				[ 34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36 ],
				[ 56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98 ]
			],
			week: [
				[ 43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53 ],
				[ 32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24 ]
			]
		};
		let index = 0;
		$('.sales').on('click', '.year .l a', function() {
			index = $(this).index();
			$(this).addClass('active').siblings().removeClass('active');
			let type = $(this).data('index');
			let currentData = data[type];
			option.series[0].data = currentData[0];
			option.series[1].data = currentData[1];
			mychart.setOption(option);
		});
		// 自动切换
		let all = $('.sales .year a');
		let timeId = setInterval(() => {
			index++;
			if (index >= 4) {
				index = 0;
			}
			$(all[index]).trigger('click');
		}, 1000);

		// 1.基于准备好的dom，初始化echarts实例,需要指定图表的放置区域
		let mychart = echarts.init(document.querySelector('.sales .line'));

		let option = {
			legend: {
				// 只能写series中数据对象的name值
				data: [ '预期销售额', '实际销售额' ],
				// 设置颜色
				textStyle: {
					color: 'orange'
				}
			},
			grid: {
				// 之前我们讲过定位，通过定位的四个方向的设置，可以控制元素的大小
				left: '3%',
				right: '4%',
				bottom: '3%',
				// 为了能够正常的显示图例legend,设置离顶部的距离更多
				top: '23%',
				// 图表的大小范围是否包含标签内容
				containLabel: true,
				// 必须设置为true才能看到边框
				show: true,
				// 设置图表的边框颜色
				borderColor: 'rgba(0, 240, 255, 0.3)'
			},
			xAxis: {
				type: 'category',
				data: [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月' ],
				axisLabel: {
					color: 'skyblue'
				}
			},
			yAxis: {
				type: 'value',
				axisLabel: {
					color: 'skyblue'
				},
				splitLine: {
					lineStyle: {
						color: 'rgba(0, 240, 255, 0.3)'
					}
				}
			},
			series: [
				{
					name: '预期销售额',
					data: data.year[0],
					type: 'line',
					// 平滑的曲线
					smooth: true,
					lineStyle: {
						color: 'yellow'
					}
				},
				{
					name: '实际销售额',
					data: data.year[1],
					type: 'line',
					smooth: true,
					lineStyle: {
						color: 'red'
					}
				}
			]
		};

		// 3.使用刚指定的配置项和数据显示图表--渲染
		mychart.setOption(option);
	})();

	// 半扇形图
	(function() {
		// 1.基于准备好的dom，初始化echarts实例,需要指定图表的放置区域
		let mychart = echarts.init(document.querySelector('.rate .circle'));
		// 2.添加配置
		let option = {
			series: [
				{
					name: '',
					type: 'pie',
					// 设置大小
					radius: [ '120%', '140%' ],
					// 设置位置
					center: [ '50%', '90%' ],
					avoidLabelOverlap: false,
					// 设置起始角度
					startAngle: 180,
					// 取消高亮偏移
					hoverOffset: 0,
					labelLine: {
						normal: {
							show: false
						}
					},
					data: [
						{
							value: 100,
							itemStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [
										// {
										// 	offset: 0,
										// 	color: 'red' // 0% 处的颜色
										// },
										{
											offset: 1,
											color: 'blue' // 100% 处的颜色
										}
									],
									global: false // 缺省为 false
								}
							}
						},
						{
							value: 100,
							itemStyle: {
								color: '#444'
							}
						},
						{
							value: 200,
							itemStyle: {
								color: 'transparent'
							}
						}
					]
				}
			]
		};

		// 3.渲染
		mychart.setOption(option);
	})();
});
